<template>
  <div>
    <p>home page</p>
    <select v-model="theme" @change="themeChanged">
      <option v-for="t in themeList" :key="t.id" :value="t.id">{{ t.name }}</option>
    </select>
    <div class="theme-test"><p>Theme test</p></div>
    <button @click="logout">logout</button>
    <p>+</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      theme: this.$store.state.settings.theme,
      themeList: this.$store.state.settings.themeList
    }
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    themeChanged() {
      this.$store.dispatch('settings/setTheme', this.theme)
    }
  }
}
</script>

<style lang="scss" scoped>
.theme-test {
  color: #F00;
}
</style>

